<template>
  <div class="mr-root user-body">
    <div class="user not" v-if="!success">
      <p>你还没登录，请登录</p>
      <form action="">
        <input type="text" v-model="username" placeholder="用户名,现在还是输入你的accesstoken吧">
        <button @submit.prevent @click="user">登录</button>
      </form>
    </div>
    <div v-if="success" :bol="success">
      <userr></userr>
    </div>
  </div>
</template>
<script>
  import Userr from "../components/Use"
  import '../assets/js/jquery3.1.1.js'
  export default {
    components: {
      Userr
    },
    data() {
      return {
        users: [],
        access: '7295f7bd-8c9d-4b66-8c58-b1404c863450',
        username: "",
        rt: "",
        success: false
      }
    },
    methods: {
      user() {
        this.axios.post('http://www.vue-js.com/api/v1/accesstoken', {
            'accesstoken': this.username
          })
          .then(data => {
            // console.log(data.data.loginname)
            this.rt = data.data.loginname
            localStorage.setItem('accesstoken',this.username   );
            localStorage.setItem('user', data.data.loginname);

            this.success = true
            // location.href = '/'
            // console.log('111')
          })
          .catch(err => {
            console.log(err)
            console.log('222')
            this.success = false
          })
      },
      tui() {
        localStorage.removeItem('accesstoken');
        localStorage.removeItem('user');
        this.success = false
      }
    },
    created() {
      if (localStorage.getItem('accesstoken')) {
        this.success = true
      } else {
        this.success = false
      }
    }
      // this.axios.post('http://www.vue-js.com/api/v1/accesstoken', {
      //     'accesstoken': this.access
      //   })
      //   .then(data => {
      //     // console.log(data)
      //     this.rt = data.data.loginname
      //     localStorage.setItem('user', this.rt);
      //   })
      //   .catch(err => {
      //     console.log(err)
      //   })


    // }
  }

</script>
<style scoped>
  .user {
    text-align: center;
    width: 8rem;
    margin: 0 auto;
    margin-top: 30px;
  }
  
  .user p {
    font-size: .7rem;
    font-weight: bold;
  }
  
  .user input {
    display: block;
    border: 1px solid #ccc;
    width: 5rem;
    height: 30px;
    margin: 20px auto;
    padding-left: 10px;
  }
  
  .user button {
    font-size: .4rem;
    display: inline-block;
    width: 3rem;
    padding: 5px 10px;
    border: none;
    border-radius: 20px;
  }

</style>
